<template>
    <div class="a-container">
        <h5>我是子组件，观察我的生命周期调用情况</h5>
        姓名：<span ref="elDOM">{{name}}</span>
        <a-button @click="changeName">改变</a-button>
    </div>
</template>

<script setup lang=''>
import { getCurrentInstance, ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onRenderTriggered, onRenderTracked } from 'vue'
// 返回当前组件实例对象
const instance = getCurrentInstance()
console.log('setup=======>', instance);
const elDOM = ref(null)
const name = ref('zhen')
const changeName = () => {
    name.value = 'zzz'
}
onBeforeMount(() => {
    debugger
    console.log('组件创建之前=======>', elDOM.value)
})
onMounted(() => {
    console.log('组件创建完成✅=======>', elDOM.value)
})
onBeforeUpdate(() => {
    console.log('组件更新之前=======>', elDOM.value.innerText)
})
onUpdated(() => {
    console.log('组件更新完成✅=======>', elDOM.value.innerText)
})
onBeforeUnmount(() => {
    console.log('组件销毁之前=======>', elDOM.value)
})
onUnmounted(() => {
    console.log('组件销毁完成✅=======>', elDOM.value)
})
onRenderTracked((e) => {
    console.log('onRenderTracked==', e)
})
onRenderTriggered((e) => {
    console.log('onRenderTriggered==', e)
})

</script>
<style scoped>
.a-container {
    padding: 20px;
    border: 1px solid #f00;
    margin: 20px 0;
}
</style>